<style lang="less">
    @import '../../../styles/common.less';

    .ivu-page-options-sizer {
        width: 100px;
    }

</style>

<template>
    <Row>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>

                </Card>

            </Col>
        </Row>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title">代码上线</p>
                    <Row class="edittable-table-height-con">
                        <!--<can-edit-table refs="table2" v-model="editInlineData" :columns-list="editInlineColumns"></can-edit-table>-->
                        <Table
                                border :context="self"
                                :columns="table_data.header"
                                :data="table_data.data"
                                @on-sort-change="tableSort"
                        ></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page
                                :total="table_data.count"
                                class="float-right"
                                show-total
                                show-sizer
                                show-elevator
                                @on-change="updateTableCurrentPage"
                                @on-page-size-change="updateTablePageLength"
                                :page-size-opts="[10, 25, 50, 100]"
                        ></Page>
                    </Row>

                </Card>
            </Col>
        </Row>

        <Modal
                v-model="modalStatus"
                title="代码上线"
                :loading="modalLoading"
                :mask-closable="false"
                ok-text="确认上线"
                @on-ok="modalOk"
        >
            <p>确认上线代码</p>
            <Progress v-if="this.progressNum > 0" :percent="parseInt((this.progressNum / 300) * 100)" status="active"></Progress>

        </Modal>



    </Row>
</template>

<script>
    import util from '../../../libs/util';
    import qs from 'qs';

    export default {
        data () {
            return {
                self: this,
                table_data: {
                    header: [
                        {
                            title: '编号',
                            type: 'index',
                            width: 60,
                            align: 'center'
                        },
                        {
                            title: '项目名称',
                            key: 'name',
                            sortable: 'custom'
                        },
                        // {
                        //     title: '项目所在环境',
                        //     key: 'get_status_display'
                        // },
                        {
                            title: '创建人',
                            key: 'oper_user__username',
                            sortable: 'custom'
                        },
                        {
                            title: '创建时间',
                            key: 'create_date',
                            sortable: 'custom',
                            render: (h, params) => {
                                let createDate = params.row.create_date ? params.row.create_date.replace('T', ' ') : '';
                                return h('span', createDate);
                            }
                        },
                        {
                            title: '操作',
                            key: 'action',
                            width: 200,
                            align: 'center',
                            render: (h, params) => {
                                console.log('params -->', params.row);
                                if (params.row.id === 1) {
                                    return [
                                        h('Button', {
                                            props: {
                                                type: 'warning',
                                                size: 'small'
                                            },
                                            style: {
                                                'margin-top': '5px',
                                                'margin-bottom': '5px'
                                            },
                                            on: {
                                                'click': () => {
                                                    // 弹出修改模态对话框
                                                    this.modalLoading = true;
                                                    this.modalStatus = true;
                                                    this.modalId = params.row.id;
                                                    this.codeEnv = 1;
                                                    this.progressNum = 0;
                                                }
                                            }
                                        }, '雷达AI代码上线（前端）'),
                                        h('Button', {
                                            props: {
                                                type: 'warning',
                                                size: 'small'
                                            },
                                            style: {
                                                'margin-bottom': '5px'
                                            },
                                            on: {
                                                'click': () => {
                                                    // 弹出修改模态对话框
                                                    this.modalLoading = true;
                                                    this.modalStatus = true;
                                                    this.modalId = params.row.id;
                                                    this.codeEnv = 2;
                                                    this.progressNum = 0;
                                                }
                                            }
                                        }, '雷达后台代码上线（前端）'),
                                        h('Button', {
                                            props: {
                                                type: 'error',
                                                size: 'small'
                                            },
                                            style: {
                                                'margin-bottom': '5px'
                                            },
                                            on: {
                                                'click': () => {
                                                    // 弹出修改模态对话框
                                                    this.modalLoading = true;
                                                    this.modalStatus = true;
                                                    this.modalId = params.row.id;
                                                    this.codeEnv = 3;
                                                    this.progressNum = 0;
                                                }
                                            }
                                        }, '雷达API代码上线（后端）')
                                    ];
                                }
                            }
                        }
                        // {
                        //     title: '操作',
                        //     key: 'action',
                        //     width: 200,
                        //     align: 'center',
                        //     render: (h, params) => {
                        //         console.log('params -->', params.row);
                        //         this.modalTitle = '切换到正式环境';
                        //         if (params.row.status === 1) {
                        //             this.modalTitle = '切换到灰度环境';
                        //         }
                        //         return [
                        //             h('Button', {
                        //                 props: {
                        //                     type: 'warning',
                        //                     size: 'small'
                        //                 },
                        //                 on: {
                        //                     'click': () => {
                        //                         // 弹出修改模态对话框
                        //                         this.modalLoading = true;
                        //                         this.modalStatus = true;
                        //                         this.modalId = params.row.id;
                        //                     }
                        //                 }
                        //             }, this.modalTitle)
                        //         ];
                        //     }
                        // }
                    ],
                    data: [],
                    count: 0,
                    length: 10,
                    current_page: 1,
                    order: '-create_date'
                },
                modalStatus: false,
                modalId: null,
                codeEnv: 1,
                progressNum: 0,
                modalLoading: false,
                modalTitle: '',
                userData: [] // 所有用户信息
            };
        },
        methods: {
            // 初始化获取表格数据
            initData () {
                let params = {
                    'current_page': this.table_data.current_page,
                    'length': this.table_data.length,
                    'order': this.table_data.order,
                    'company_id': localStorage.company_id
                };

                util.ajax.get('api/code_online', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        this.table_data.data = res.data.data.ret_data;
                        this.table_data.count = res.data.data.data_count;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            },

            // 获取上线salt执行结果
            getExecuteProgress (jid, dingshiqi) {
                util.ajax.post('api/code_online/search_jobid/' + jid).then(res => {
                    if (res.data.code === 200) {
                        // 执行完成
                        if (res.data.data) {
                            clearInterval(dingshiqi);
                            this.progressNum = 300;
                            this.$Notice.success({
                                title: '上线成功',
                                duration: 2
                            });

                            setTimeout(() => {
                                this.modalStatus = false;
                                this.modalLoading = false;
                            }, 2000);
                        } else {
                            this.progressNum += 2;
                        }
                    } else {
                        // 修改失败
                        console.log('res.data.msg -->', res.data.msg);
                    }
                });
            },

            modalOk () {
                let params = {
                    'code_env': this.codeEnv
                };
                util.ajax.post('api/code_online/code_online/' + this.modalId, qs.stringify(params)).then(res => {
                    if (res.data.code === 200) {
                        // this.modalStatus = false;
                        console.log(res.data.data);
                        let jid = res.data.data.return[0].jid;
                        let dingshiqi = setInterval(() => {
                            this.getExecuteProgress(jid, dingshiqi);
                        }, 2000);
                    } else {
                        // 修改失败
                        console.log('res.data.msg -->', res.data.msg);
                        // for (let key in res.data.msg) {
                        //     this.modalData.Update.formItemError[key] = res.data.msg[key][0].message;
                        // }
                    }

                    // this.modalLoading = false;
                });
            },

            // 当页码被改变是触发
            updateTableCurrentPage (currentPage) {
                this.table_data.current_page = currentPage;
                this.initData();
            },

            // 修改每页显示数量
            updateTablePageLength (length) {
                this.table_data.length = length;
                this.initData();
            },

            // 表格排序触发
            tableSort (e) {
                let key = e.key;
                let order = e.order;

                if (order === 'desc') {
                    this.table_data.order = '-' + key;
                } else {
                    this.table_data.order = key;
                }
                this.initData();
            }
        },
        created () {
            this.initData();
        }
    };
</script>
